<template>
  <div>
    <hzhy-data-table ref="dataTable" v-bind="tableConfig">
      <template slot="left-btn">
        <el-button type="primary" icon="el-icon-plus" plain @click="handleRowUpdate('add')">
          添加
        </el-button>
      </template>
    </hzhy-data-table>
  </div>
</template>

<script>
import * as api from '@/const/api'
import { configureSelfPageEdit } from '@/const/path'

export default {
  title: '自定义页面',
  name: 'ConfigureSelfPage',
  components: {},
  data() {
    return {
      roleConfigVisible: '',
      currentRow: {},
    }
  },
  computed: {
    tableConfig() {
      return {
        url: api.solutionContentPage,
        columns: [
          {
            label: '序号',
            type: 'index',
            prop: 'index',
          },
          {
            label: '页面名称',
            prop: 'title',
          },
          {
            label: '备注',
            prop: 'description',
          },
          {
            label: '创建时间',
            prop: 'createTime',
          },
          {
            label: '操作',
            prop: 'operation',
            width: 160,
            fixed: 'right',
            setBtns: (row) => {
              const btns = [
                {
                  label: '编辑',
                  handler: () => {
                    this.handleRowUpdate('edit', row)
                  },
                },
                {
                  label: '复制',
                  handler: () => {
                    this.handleRowUpdate('copy', row)
                  },
                },
                {
                  label: '删除',
                  className: 'red',
                  handler: () => {
                    this.handleRowDelete(row)
                  },
                },
              ]
              return this.$ac.operationAccess(btns)
            },
          },
        ],
        searchForm: [
          {
            $type: 'input',
            $id: 'title',
            label: '标题',
            $el: {
              clearable: true,
              placeholder: '请输入',
            },
          },
        ],
      }
    },
  },
  methods: {
    handleRowUpdate(type, row) {
      if (type === 'add') {
        this.$router.push({
          path: `${configureSelfPageEdit}0`,
        })
      } else {
        this.$router.push({
          path: `${configureSelfPageEdit}${row.id}?type=${type}`,
        })
      }
    },
    async handleRowDelete(row) {
      let loading = ''
      try {
        const isFlag = await this.$confirm('确认删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        if (isFlag !== 'confirm') {
          return
        }
        loading = this.$loading({
          text: 'Loading',
          spinner: 'el-icon-loading',
        })
        const { code, msg } = await this.$axios.$delete(`${api.solutionContent}/${row.id}`)
        if (+code !== 200) {
          throw new Error(msg || '操作失败')
        }
        this.$message.success('操作成功')
        this.$refs.dataTable.goPage()
      } catch (err) {
        err.message && this.$message.error(err.message)
      } finally {
        loading && loading.close()
      }
    },
  },
}
</script>

<style lang="less" scoped></style>
